<template>
  <div class="progressTable">
    <userHeader />
    <div class="breadClum">
      <span>
          <router-link :to="{path:'/pageIndex'}">   <a class="bread1">当前位置：首页  >  </a></router-link>
          <router-link :to="{path:'/comment'}">  <a class="bread2">内控评价 ></a></router-link>
          <a class="bread2">流程测试 </a>
      </span>
    </div>
    <div class="navList">
      <div class="sp1" style="background: #8cc34b" v-clickoutside="clickhideul">
        <span @click.stop="choiseTyoe">{{categyType}}</span>
        <ul class="hideUl" v-if="hideUl&&evaplantype_list">
          <li @click.stop="selectType(item.evaplan_type_name,item.evaplan_type_id)" v-for="(item,index) in evaplantype_list" :key="index">
            <span>{{item.evaplan_type_name}}</span>
          </li>
          <li v-if="evaplantype_list.length==0">
            暂无数据
          </li>
        </ul>
      </div>
      <div class="sp3" style="background: #8cc34b" v-clickoutside="clickhidecompany">
        <span @click.stop="choiseCompany">{{cateCompany}}</span>
      </div>
    </div>
    <el-table
      :row-class-name="tableRowClassName2"
      :cell-class-name="cell"
      :row-style="showRow"
      ref="tableData3"
      current-row-key
      :data="formatData2"
      v-loading="loading"
      :height="height"
      style="width: 100%"
      >
      <el-table-column
        prop="element_name"
        label="控制元素"
        fixed
        width="125">
        <template slot-scope="scope">
            <span>{{scope.row.element_name}}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="process_num"
        fixed
        label="项目编号"
        width="195">
      </el-table-column>
      <el-table-column label="流程目录"
                     :render-header="renderHeaderOne"
                     class="e-table-cloumnAll">
      <el-table-column
          prop="first_process"
          label="一级流程"
          width="170">
          <template slot-scope="scope" >
              <span @click.stop="toggleExpanded(scope.$index)"  v-if=scope.row.first_process.process_name class="lc-text">
                      <img src="../../static/images/add.png"  v-if="!scope.row._expanded&&iconShow(scope.$index,scope.row)">
                      <img src="../../static/images/reduce.png" alt="" v-else>
                <span>{{scope.row.first_process.process_name}}</span>
              </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="second_process"
          label="二级流程"
          width="170">
          <template slot-scope="scope">
               <span @click.stop="toggleExpanded(scope.$index)"  v-if=scope.row.second_process.process_name class="lc-text">
                   <img src="../../static/images/add.png"  v-if="!scope.row._expanded&&iconShow(scope.$index,scope.row)">
                  <img src="../../static/images/reduce.png" alt="" v-else>
               <span>{{scope.row.second_process.process_name}}</span>
            </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="third_process"
          label="三级流程"
          width="170">
          <template slot-scope="scope">
               <span @click.stop="toggleExpanded(scope.$index)"  v-if=scope.row.third_process.process_name class="lc-text">
                   <img src="../../static/images/add.png"  v-if="!scope.row._expanded&&iconShow(scope.$index,scope.row)">
                  <img src="../../static/images/reduce.png" alt="" v-else>
               <span>{{scope.row.third_process.process_name}}</span>
            </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="fourth_process"
          label="四级流程"
          width="170">
          <template slot-scope="scope">
               <span @click.stop="toggleExpanded(scope.$index)"  v-if=scope.row.fourth_process.process_name class="lc-text">
                   <img src="../../static/images/add.png"  v-if="!scope.row._expanded&&iconShow(scope.$index,scope.row)">
                  <img src="../../static/images/reduce.png" alt="" v-else>
                  <span>{{scope.row.fourth_process.process_name}}</span>
            </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="fifth_process"
          label="五级流程"
          width="170">
          <template slot-scope="scope">
               <span @click.stop="toggleExpanded(scope.$index)"  v-if=scope.row.fifth_process.process_name class="lc-text">
                   <img src="../../static/images/add.png"  v-if="!scope.row._expanded&&iconShow(scope.$index,scope.row)">
                  <img src="../../static/images/reduce.png" alt="" v-else>
              <span>{{scope.row.fifth_process.process_name}}</span>
            </span>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column
        prop="process_level"
        label="级别"
        width="85">
      </el-table-column>
      <el-table-column
        prop="process_control_count"
        label="控制点数量"
        width="105">
      </el-table-column>
      <!-- prop="evaluationplan.walk_through"-->
      <el-table-column

        label="穿行测试标识"
        width="75">
        <template slot-scope="scope">
          <div v-if="scope.row.evaluationplan">
            <p  >
              <span>
                 <!--<b class="e-wrong-active e-wrong" v-if="scope.row.evaluationplan.walk_through==0"></b>-->
                 <b class="e-wrong-disActive e-wrong"></b>
            </span>
              <span>
              <b class="e-right-active e-right" v-if="scope.row.evaluationplan.walk_through>0"></b>
               <b class="e-right-disActive e-right" v-else></b>
            </span>
            </p>
          </div>
          <div v-else>
            <p  >
              <span>
                 <b class="e-wrong-disActive e-wrong"  ></b>
            </span>
              <span>
               <b class="e-right-disActive e-right" ></b>
            </span>
            </p>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="affect_extent"
        label="影响程度"
        width="65">
      </el-table-column>
      <el-table-column
        prop="control_effect"
        label="控制效果"
        width="65">
      </el-table-column>
      <el-table-column
        prop="effectDegree"
        label="集团管控"
        width="65">
        <template slot-scope="scope">
          <p >
              <span>
                 <b class="e-Active-check e-check-rights" v-if="scope.row.is_blockcontrol_company"> </b>
                <b class=" e-check-rights" v-else></b>
             </span>
          </p>
        </template>
      </el-table-column>

      <el-table-column
        prop="effectDegree"
        label="关键控制"
        width="65">
        <template slot-scope="scope">
          <p >
            <span>
                 <b class="e-Active-check e-check-rights" v-if="scope.row.is_critical"> </b>
                 <b class=" e-check-rights" v-else></b>
             </span>
          </p>
        </template>
      </el-table-column>
      <el-table-column
        prop="effectDegree"
        label="法规要求"
        width="65">
        <template slot-scope="scope">
          <p >
             <span>
                 <b class="e-Active-check e-check-rights" v-if="scope.row.is_legal"> </b>
                <b class=" e-check-rights" v-else></b>
             </span>
          </p>
        </template>
      </el-table-column>
      <el-table-column
        label="状态"
        width="105">
        <template slot-scope="scope" >
          <div v-if="scope.row.evaluationplan">
            <span>{{status[scope.row.evaluationplan.evaluation_state]}}</span>
            <span v-if="scope.row.bl_sample0record_state==0">(样本为0待审核)</span>
            <!--<span v-if="scope.row.bl_sample0record_state&&scope.row.bl_sample0record_state==1&&scope.row.evaluationplan.evaluation_state!=2">(继续评价)</span>-->
            <span v-if="scope.row.bl_sample0record_state&&scope.row.bl_sample0record_state==1&&scope.row.evaluationplan.evaluation_state==0">(继续评价)</span>
            <span v-if="scope.row.bl_sample0record_state&&scope.row.bl_sample0record_state==2">(样本为0审核未通过)</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="effectDegree"
        label="评价"
        width="120"
       >
        <template slot-scope="scope">
          <div v-if="scope.row.evaluationplan">
            <span  v-if="scope.row.evaluationplan.evaluation_state==3"  @click.stop="navToPlan(scope.row.evaluationplan.evaplan_id,scope.row.evaluationplan.evaluation_state,scope.row.bl_evaluator,scope.row.bl_auditor,scope.row.evaluationplan.evaluator,scope.row.bl_sample0record_state)" class="e-reject">重新评价</span>
            <span v-else-if="scope.row.evaluationplan.evaluation_state==1&& scope.row.bl_sample0record_state&&scope.row.bl_sample0record_state==0" class="e-reject">内控评价</span>
            <span v-else

                  @click.stop="navToPlan(scope.row.evaluationplan.evaplan_id,scope.row.evaluationplan.evaluation_state,scope.row.bl_evaluator,scope.row.bl_auditor,scope.row.evaluationplan.evaluator,scope.row.bl_sample0record_state)"
                  :class="{'e-wai':scope.row.evaluationplan.evaluation_state==0,'e-shenheing':scope.row.evaluationplan.evaluation_state==1,
                  'notice':scope.row.evaluationplan.evaluator==user_id,
            'e-pass':scope.row.evaluationplan.evaluation_state==2}">内控评价</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="effectDegree"
        label="审核"
        width="120"
       >
        <template slot-scope="scope">
          <div  v-if="scope.row.evaluationplan">
            <div v-if="scope.row.bl_sample0record_state==1">
                <span @click.stop="navToPlan(scope.row.evaluationplan.evaplan_id,scope.row.evaluationplan.evaluation_state,scope.row.bl_evaluator,scope.row.bl_auditor,scope.row.evaluationplan.auditor,scope.row.bl_sample0record_state)"  v-if="scope.row.evaluationplan.evaluation_state==3" class="e-reject">审核未通过</span>
                <span v-else-if="scope.row.evaluationplan.evaluation_state==2" class="e-pass" >审核通过</span>
                <span v-else  @click.stop="navToPlan(scope.row.evaluationplan.evaplan_id,scope.row.evaluationplan.evaluation_state,scope.row.bl_evaluator,scope.row.bl_auditor,scope.row.evaluationplan.auditor,scope.row.bl_sample0record_state)"   :class="{'e-wait':scope.row.evaluationplan.evaluation_state==0, 'notice ':scope.row.evaluationplan.auditor==user_id,'e-shenheing':scope.row.evaluationplan.evaluation_state==1}">内控审核</span>
            </div>
            <div v-else-if="scope.row.bl_sample0record_state==0">
              <span  @click.stop="navToPlan(scope.row.evaluationplan.evaplan_id,scope.row.evaluationplan.evaluation_state,scope.row.bl_evaluator,scope.row.bl_auditor,scope.row.evaluationplan.auditor,scope.row.bl_sample0record_state)"   :class="{'e-wait':scope.row.evaluationplan.evaluation_state==0, 'notice ':scope.row.evaluationplan.auditor==user_id,'e-shenheing':scope.row.evaluationplan.evaluation_state==1}">内控审核</span>
            </div>
            <div v-else-if="scope.row.bl_sample0record_state==2">
            <span   @click.stop="navToPlan(scope.row.evaluationplan.evaplan_id,scope.row.evaluationplan.evaluation_state,scope.row.bl_evaluator,scope.row.bl_auditor,scope.row.evaluationplan.auditor,scope.row.bl_sample0record_state)"   :class="{'e-wait':scope.row.evaluationplan.evaluation_state==0, 'notice ':scope.row.evaluationplan.auditor==user_id,'e-shenheing':scope.row.evaluationplan.evaluation_state==1}">内控审核</span>
           </div>
            <div v-else>
              <span @click.stop="navToPlan(scope.row.evaluationplan.evaplan_id,scope.row.evaluationplan.evaluation_state,scope.row.bl_evaluator,scope.row.bl_auditor,scope.row.evaluationplan.auditor,scope.row.bl_sample0record_state)"  v-if="scope.row.evaluationplan.evaluation_state==3" class="e-reject">审核未通过</span>
              <span v-else-if="scope.row.evaluationplan.evaluation_state==2" class="e-pass" >审核通过</span>
              <span v-else  @click.stop="navToPlan(scope.row.evaluationplan.evaplan_id,scope.row.evaluationplan.evaluation_state,scope.row.bl_evaluator,scope.row.bl_auditor,scope.row.evaluationplan.auditor,scope.row.bl_sample0record_state)"   :class="{'e-wait':scope.row.evaluationplan.evaluation_state==0, 'notice ':scope.row.evaluationplan.auditor==user_id,'e-shenheing':scope.row.evaluationplan.evaluation_state==1}">内控审核</span>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="effectDegree"
      >
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
  import userHeader from '@/components/header.vue';
  import {mapState} from 'vuex';
  import treeToArray2 from '@/page/test/catalog.js'
  import treeToArray from '@/page/test/sub.js';
  import Clickoutside from 'element-ui/lib/utils/clickoutside';
  export default({
    directives: { Clickoutside },
    data (){
      return {
        tempId:'',
        tempName:'',
        loading:true,
        minLength:0,
        show1:false,
        formLabelWidth:'160px',
        showFlag:false,
        tableData3: [],
        tableData2:[],
        company_list:[],
        hideUl:false,
        evaplantype_list:[],
        hidecompany:false,
        categyType:'评价类型',
        cateCompany:'评价公司',
        status:[
            '待评价',
            '待审核',
            '已通过',
            '未通过'
        ]
      }
    },
    components:{
      userHeader,
    },
    methods:{
//      getUserName3(val){
//        if(this.tableData2){
//          for(var i in this.tableData2){
//            console.log(this.tableData2[i].user_id)
//            if(this.tableData2[i].user_id ==val){
//              return this.tableData2[i].user_name
//            }
//          }
//        }
//      },
//      getMenber(){
//        this.axios.get('/api/v1/flow/participantusers/'+`${this.company_id}`)
//          .then((res)=>{
//            if(res.data.code==0){
//              this.tableData2=res.data.data;
//            }
////            console.log(this.tableData2)
//          }).catch((res)=>{
//          console.log(res)
//          this.$alert(res)
//        })
//      },
      clickhideul(){
        this.hideUl=false;
      },
      clickhidecompany(){
        this.hidecompany=false;
      },
      choiseTyoe(){
        this.hideUl =!this.hideUl;
      },
      choiseCompany(){
        this.hidecompany =!this.hidecompany;
      },
      //单选ul
      selectType(name,id){
          console.log(name,id)
        this.categyType = name;
        this.hideUl =false;
        this.getProgressTest(id);
        this.loading=true;
//        const loading = this.$loading({
//          lock: true,
//          text: '请稍后',
//          spinner: 'el-icon-loading',
//          background: 'rgba(255, 255, 255, 0.7)',
//          target: document.querySelector('.el-table')
//        });
//        setTimeout(() => {
//          loading.close();
//        }, 2000);
      },
      //获取评价类型列表
      getComentTypeList(id){
        this.axios.get('/api/v1/flow/evaplantype',
          {
            params:{
              company_id:id||this.company_id,
              limit:10,
              page:1
            }
          })
          .then((res)=>{
            if(res.data.code==0){
              console.log(res.data.data);
              this.evaplantype_list =res.data.data;
              if(this.evaplantype_list.length){
                this.categyType =this.evaplantype_list[0].evaplan_type_name;
                this.getProgressTest(this.evaplantype_list[0].evaplan_type_id);
              }else{
                this.categyType='暂无数据';
                this.tableData3 =[]
              }
            }
          })
      },
      selectType2(name,id){
        console.log(name,id)
        this.cateCompany = name;
        this.hidecompany =false;
        this.getComentTypeList(id)

      },
      navToPlan(id,state,bl_evaluator,bl_auditor,evaluator,bl_sample0record_state){
          if(bl_sample0record_state==0){
              this.$alert('样本为0待审核状态,请先完成样本为0审核再进行评价或审核');
              return false;
          }

//      审核参数    navToPlan(scope.row.evaluationplan.evaplan_id,scope.row.evaluationplan.evaluation_state,scope.row.bl_evaluator,scope.row.bl_auditor,scope.row.evaluationplan.auditor,scope.row.bl_sample0record_state)"
//   151 1 0 0 49 undefined
        console.log(id,state,bl_evaluator,bl_auditor,evaluator,bl_sample0record_state)
        // 92 undefined 0 1 16
        //80 1 0 1 23
        if(this.user_id ==evaluator){
          console.log(bl_evaluator==1 && bl_auditor ==0)
          console.log(bl_evaluator==0 && bl_auditor ==1);
//          评价状态 0:待评价(保存) 1:已评价,未审核(提交) 2:审核通过 3:审核未通过,待重新评价
          if(bl_evaluator==1 && bl_auditor ==0 ){
            this.$router.push({
              path:'/defectAudit',
              query:{
                evaplan_id:id,
                bl_evaluator:bl_evaluator,
                state:state,
                sample:bl_sample0record_state
              }
            })

          }else if(bl_evaluator==0 && bl_auditor ==1 ){
              if(state==0){
                this.$alert('评价还未开始，请耐心等待','提示')
              }else if(state==2){
                this.$alert('当前审核已通过','提示')
              }else if(state==3){
                this.$alert('审核未通过,待重新评价','提示')
              }
              else{
                this.$router.push({
                  path:'/defectAudit',
                  query:{
                    evaplan_id:id,
                    bl_auditor:bl_auditor,
                    state:state,
                    sample:bl_sample0record_state
                  }
                })
              }

          }
        }else{
          this.$alert('你不是当前操作人员','提示');
          return  false;
        }
      },

      tableRowClassName2 ({row, rowIndex}) {
        //把每一行的索引放进row
        row.index = rowIndex;
      },
      showRow: function(row) {
        const show = (row.row.parent ? (row.row.parent._expanded && row.row.parent._show) : true);
        row.row._show = show;
        return show ? 'animation:treeTableShow 1s;-webkit-animation:treeTableShow 1s;' : 'display:none;'
      },
      // 切换下级是否展开
      toggleExpanded: function(trIndex) {
        const record = this.formatData2[trIndex]
        record._expanded = !record._expanded
      },
      // 图标显示
      iconShow(index, record) {
        return ( record.son_process && record.son_process.length > 0)
      },
      cancelAdd(){
        this.form ={}
        this.dialogFormVisible =false
      },
      openData(){
        console.log(123)
      },
      //添加流程
      addCatelogo(){
        this.dialogFormVisible =true
      },
      choiseCheck(row){
//          console.log(selection,row)
      },
      cell({row, column, rowIndex, columnIndex}) {
        //第八列添加 red 类
//        if(columnIndex==0||rowIndex==5){
//            console.log(row)
//          return "first-table-clouum"
//        }
        if(columnIndex==2||columnIndex==3 ||columnIndex==4||columnIndex==5||columnIndex==6){
          return "e-table-align-left"
        }
        if(columnIndex == 9){
          return 'walk_through'
        }
        if(columnIndex==13||columnIndex==14||columnIndex ==12){
          return 'commentPerson'
        };
        if(columnIndex==16){
          return 'commentState'
        };
        if(columnIndex==17){
          return 'shenheState'
        }
//        //某一行其中的一个变量applies值如果大于0，并且在第六列，即确定一个具体的单元格需要确定行和列
//        if(parseFloat(row.applies) >0 && columnIndex == 5){
//          return 'red'
//        }
      },
      renderHeaderOne (h, {column, $index}) {
        return h('span', [
          h('span', column.label),
          h('span', {
            class: 'addIcon',
            on: {
              click: () => {
//                console.log(`${column.label}   ${$index}`)
                console.log(this.formatData2[0]._expanded)
                for(var i in this.formatData2){
                  this.formatData2[i]._expanded=!this.formatData2[i]._expanded
                }
                if(!this.formatData2[0]._expanded){
                    //展开
                  console.log('当前是展开状态 展示折叠数据')
                  this.$store.commit('changeHeight',{
                    height:(100+this.minLength*50)
                  })
                }else{
                  console.log('当前是状态  展示所有数据')
//                  var height =document.documentElement.clientHeight||document.body.clientHeight;
//                  this.$store.commit('changeHeight',{
//                    height:height-190
//                  })

                  this.$store.commit('changeHeight',{
                    height:this.height
                  })
                }
              }
            }
          })
        ])
      },
      getProgressTest(id){
        this.axios.get('/api/v1/flow/evaluationplan/'+`${id}`)
          .then((res)=>{
            console.log(res.data.data)
            if(res.data.code==0){
              this.tableData3 =res.data.data;
              this.minLength =res.data.data.length;
              this.loading=false;
            }
          })
      },
      initData(){
          this.axios.get('/api/v1/flow/comanyevaplantype',{
              params:{
                page_type:0
              }
          })
            .then((res)=>{
              if(res.data.code==0){
                  console.log(res.data);
                this.company_list=this.formatCompany(res.data.data.company_list[0]) ;
                this.evaplantype_list=(res.data.data.evaplantype_list);
                console.log(this.company_list);
                console.log(this.evaplantype_list);
                console.log(res.data.data);
                console.log(this.tempId+'@!1111111111')
                if(this.tempId){
                  this.getProgressTest(this.tempId);
                }else {
                    if(this.evaplantype_list&&this.evaplantype_list.length){
                      this.categyType =this.evaplantype_list[0].evaplan_type_name;
//                      alert(this.evaplantype_list[0].evaplan_type_name);
                      this.getProgressTest(this.evaplantype_list[0].evaplan_type_id);
                  }else{
                    this.categyType='暂无数据';
                    this.tableData3 =[];
                    this.loading =false;
                  }
                }
                this.cateCompany =this.company_name;
              }
          })

      },
      formatCompany(data) {
        let tmp;
        if (!Array.isArray(data)) {
          tmp = [data]
        } else {
          tmp = data;
        }
        const func = this.evalFunc || treeToArray
        const args = this.evalArgs ? Array.concat([tmp, this.expandAll], this.evalArgs) : [tmp, this.expandAll]
        console.log(func.apply(null, args))
        return func.apply(null, args)
      },
      upDateState(id){
          this.axios.put('/api/v1/accout/usermessage/'+`${id}`)
            .then((res)=>{
              console.log(res)
            })
      }
    },
    computed:{
      ...mapState({
        company_id:state =>state.app.loginState.company_id||sessionStorage.getItem('company_id'),
        company_name:state=>state.app.loginState.company_name||sessionStorage.getItem('company_name'),
        company_pid:state=>state.app.loginState.company_pid||sessionStorage.getItem('company_pid'),
        user_id:state=>state.app.loginState.user_id||sessionStorage.getItem('user_id'),
        height:state=>sessionStorage.getItem('height')||state.app.height,
      }),
      formatData2: function() {
        let tmp;
        let temp2 =[];
        if (!Array.isArray(this.tableData3)) {
          tmp = [this.tableData3]
        } else {
          tmp = this.tableData3
        }
        const func = this.evalFunc || treeToArray2
        const args = this.evalArgs ? Array.concat([tmp, this.expandAll], this.evalArgs) : [tmp, true]
//        this.$store.commit('changeHeight',{
//          height:(100+(func.apply(null, args).length||1)*50)
//        })
        return func.apply(null, args)
      },
//      formatCompany: function() {
//        let tmp;
//        console.log(this.company_list)
//        if (!Array.isArray(this.company_list)) {
//          tmp = [this.company_list]
//        } else {
//          tmp = this.company_list
//        }
//        const func = this.evalFunc || treeToArray
//        const args = this.evalArgs ? Array.concat([tmp, this.expandAll], this.evalArgs) : [tmp, this.expandAll]
//        console.log(func.apply(null, args))
//        return func.apply(null, args)
//      },
    },
    mounted(){
        console.log(this.height);
        if(this.$route.query.mess_link){
            if(this.$route.query.mess_link.indexOf('evaluationplanTypeId')){
              var tempData=(this.$route.query.mess_link.substring(this.$route.query.mess_link.indexOf('evaluationplanTypeId')).split('&'));
              console.log(tempData);
              this.tempId =tempData[0].split('=')[1];
              this.categyType =tempData[1].split('=')[1];
              console.log(this.tempId);
              console.log( this.categyType);
            }
        }
        this.initData();
        if(this.$route.query.mess_id){
          this.upDateState(this.$route.query.mess_id)
        };
    },
  })
</script>
<style  scoped="">
  .progressTable{
    width: 100%;
    height: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 10px;
  }
 .progressTable .el-table >>> .has-gutter .addIcon{
    display: inline-block;
    width:17px;
    height: 15px;
    background: #afd682;
    margin-left: 6px;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    background-image: url("../../static/images/add2.png");
    background-repeat: no-repeat;
    background-position: center;
  }
  .progressTable .el-table{
    margin-bottom: 10px;
  }
 .progressTable .el-table  >>>  .el-table__header .has-gutter th{
    text-align: center;
    background: #d3e9bb;
  }
 .progressTable  .el-table  >>>  .el-table__header .el-table-column--selection .el-checkbox{
    display: none;
  }
 .progressTable .el-table  >>> .el-table__fixed-right-patch{
    border-bottom: none;
  }
 .progressTable  .el-table  >>>  .el-table__header .has-gutter th .cell{
    color: #5d9120
  }
 .progressTable .el-dialog__wrapper >>>.el-dialog  .el-form-item__error{
    left:390px;
    top:50%;
    -webkit-transform: transLateY(-50%);
    -moz-transform: transLateY(-50%);
    -ms-transform: transLateY(-50%);
    -o-transform: transLateY(-50%);
    transform: transLateY(-50%);
  }
 .progressTable .breadClum{
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    background:#f1f1f1;

  }
 .progressTable .breadClum span{
    float: left;
    margin-left: 10px;
  }
 .progressTable .breadClum .bread1{
    color:#888888 ;
  }
 .progressTable .breadClum .bread2{
    color:#699f2b ;
  }
 .progressTable  .directionNav{
    height: 58px;
    line-height: 58px;
    text-align: center;
    font-size: 22px;
    color: #333333;
  }

  .progressTable  .navList .sp1 .hideUl{
    position: absolute;
    left: 0;
    top:60px;
    width: 180px;
    z-index: 999;
    background: white;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    padding-top: 6px;
    overflow-y: scroll;
    min-height: 75px;
    max-height: 300px;
    /*border: 1px solid #;*/
  }
  .progressTable  .navList .sp1 .hideUl:after{
    position: absolute;
    content: '';
    width: 5px;
    height: 10px;
    left: 36px;
    top:-5px;
    margin-left: -2px;
    width: 8px;
    height: 8px;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    background: white;
  }
  .progressTable  .navList .sp1 .hideUl li{
    height: 34px;
    font-size: 14px;
    line-height: 34px;
    color: #fff;
    text-align: center;
    background: #8bc34a;
    width: 100%;
    text-align: center;
    overflow: hidden;
  }
 .progressTable .navList{
   height: auto;
   border: none;
  }
 .progressTable .navList  .sp1{
    background: #8bc34a;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    font-size: 14px;
    color: white;
    margin-right: 7px;
    position: relative;
    height: 40px;
     padding: 0;
     padding-right: 30px;
     line-height: 40px;
      float: left;
     margin-bottom: 10px;
  }
  .progressTable .navList  .sp3{
    background: #8bc34a;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    font-size: 14px;
    color: white;
    margin-right: 7px;
    position: relative;
    height: 40px;
    padding: 0;
    line-height: 40px;
    float: left;
    margin-bottom: 10px;
    padding: 0 10px;
  }
 .progressTable .navList .sp1{
    margin-left: 10px;
  }
 .progressTable .navList span.green{
    background: #769dd6;
  }
 .progressTable .navList span.dark{
    background: #f0ba14;
  }

 .progressTable .el-table  >>>  th.is-leaf{
    background: #d3e9bb;
    height:58px;
  }
 .progressTable  .el-table  >>> thead  th.is-leaf .cell{
    font-size: 14px;
    color: #5d9120;
    font-weight: normal;
    text-align: center;
  }
 .progressTable .el-table  >>> tr  th.is-leaf{
    border-bottom: 1px solid #aac983;
    border-right: 1px solid #aac983;
  }
 .progressTable .el-table >>> .el-table__body-wrapper   .el-table__body tr{
    border-bottom: 1px solid #aac983;
  }
 .progressTable .el-table  >>> .el-table__body-wrapper  .el-table__body  .el-table__row .cell{
    /*text-align: center;*/
  }
 .progressTable  .el-table >>> .el-table__body-wrapper   .el-table__body  .el-table__row td{
    /*height: 50px;*/
    border-right: 1px solid #aac983;
  }
 .progressTable .el-table >>> .el-table__body-wrapper   .el-table__body tr{
    border-bottom: 1px solid #aac983;
  }
 .progressTable  .el-table td, .el-table th{
    padding: 10px 0;
  }
 .progressTable  .el-table thead.is-group th{
    background: #d3e8ba !important;;
  }
 .progressTable .el-table thead.is-group th.is-leaf{
    background: #e9f4dc !important;;
    border-bottom: 1px solid #e7e7e7 !important;;
  }

 .progressTable  .el-table th>.cell{
    text-align: center;
    color:#5d9120;
    font-size: 18px;
    font-weight: normal;
  }

 .progressTable .el-table .cell{
    text-align: center;
  }

 .progressTable .el-table thead .el-checkbox__inner{
    width: 0;
    height: 0;
  }
 .progressTable .el-checkbox__inner{
    width: 22px !important;
    height: 22px !important;
  }
 .progressTable .el-checkbox__input.is-checked .el-checkbox__inner, .progressTable .el-checkbox__input.is-indeterminate .el-checkbox__inner{
    background-color: #8bc34a !important;
    border-color: #8bc34a !important;;
  }
 .progressTable .el-checkbox__inner::after{
    left: 6px !important;
    position: absolute;
    top: 2px !important;
    height: 12px !important;
    width: 6px !important;
  }

 .progressTable tbody,tr:nth-child(even){
    background: #f8f8f8 !important;
  }

 .progressTable .breadClum .page1 a,.breadClum .page2 a{
    color: #333;
    text-decoration: none;
    margin-left: 30px;
  }
 .progressTable >>> .walk_through b,
 .progressTable >>> .commentPerson b{
   display: inline-block;
   width: 14px;
   height: 14px;
   background: #d5d5d5;
   border-color: #d5d5d5;
   position: relative;
   border: 1px solid #dcdfe6;
   border-radius: 2px;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   z-index: 1;
   -webkit-transition: border-color .25s cubic-bezier(.71,-.46,.29,1.46),background-color .25s cubic-bezier(.71,-.46,.29,1.46);
   transition: border-color .25s cubic-bezier(.71,-.46,.29,1.46),background-color .25s cubic-bezier(.71,-.46,.29,1.46);
 }
 .progressTable >>> .walk_through  b.e-right:after,
 .progressTable >>> .commentPerson b.e-check-rights:after
 {
   left: 3px;
   top:1px;
   width: 4px;
   height: 6px;
   -webkit-transform: rotate(45deg) scaleY(1);
   transform: rotate(45deg) scaleY(1);
   -webkit-box-sizing: content-box;
   box-sizing: content-box;
   content: "";
   border: 1px solid #fff;
   border-left: 0;
   border-top: 0;
   position: absolute;
   -webkit-transition: -webkit-transform .15s ease-in .05s;
   transition: -webkit-transform .15s ease-in .05s;
   transition: transform .15s ease-in .05s;
   transition: transform .15s ease-in .05s, -webkit-transform .15s ease-in .05s;
   transition: transform .15s ease-in .05s,-webkit-transform .15s ease-in .05s;
   -webkit-transform-origin: center;
   transform-origin: center;
 }
 .progressTable >>> .walk_through b.e-right-active{
   background: #8bc34a;
   border-color: #8bc34a;
 }
 .progressTable >>>  .commentPerson .e-Active-check{
   background: #efbb10;
   border-color: #efbb10;
}


 .progressTable >>> .walk_through b.e-wrong:after{
   content:'×';
   color: #fff;
   line-height: 14px;
   font-size: 10px;
   text-align: center;
   top:50%;
   transform: translateY(-50%);
   -webkit-box-sizing: content-box;
   box-sizing: content-box;
   position: absolute;
   left: 0;
   width: 100%;
 }
 .progressTable >>> .walk_through b.e-wrong-active{
   background: #f56c6c;
   border-color: #f56c6c;
 }

 .progressTable >>> .commentState span,
 .progressTable >>> .shenheState span{
    border: 1px solid #ccc;
   padding: 0 4px;
   border-radius: 2px;
   position: relative;
 }
  .progressTable >>> .commentState span.notice:after,
  .progressTable >>> .shenheState span.notice:after{
    position: absolute;
    right:0;
    top:-2px;
    width: 4px;
    height: 4px;
    content: '';
    background: red;
    border-radius: 50%;
    -moz-border-radius: 50%;

  }
  .progressTable >>> .commentState span.iconfont:before,
  .progressTable >>> .shenheState span.iconfont:before{
    position: absolute;
    right: 0;
    top:-50%;
    font-size: 44px;
    color: red;
  }

 .progressTable >>> .commentState span.e-wait{
   background: #dddddd;
   border-color:#dddddd ;
   color: #b6b6b6;
 }
 .progressTable >>> .commentState span.e-shenheing{
   background: #ddd;
   border-color:#ddd ;
   color: #959595;
 }
  .progressTable >>> .shenheState span.e-shenheing{
    background: #fff;
    border-color: #d2d2d2;
    color:#d2d2d2 ;
  }



 .progressTable >>> .commentState span.e-pass{
   background: #8cc34b;
   border-color:#8cc34b ;
   color: white;
 }
  .progressTable >>> .shenheState span.e-pass{
    background:#8cc34b;
    border-color: #8cc34b;
    color:#fff ;
  }
 .progressTable >>> .commentState span.e-reject,
 .progressTable >>> .shenheState span.e-reject{
    background: #f66c6c;
    border-color:#f66c6c ;
   color: white;
 }
 .progressTable >>> .commentState span.e-wai,
 .progressTable >>> .shenheState span.e-wai{
   background: #fff;
   border-color:#dbdbdb ;
   color: #dbdbdb;
 }
  .progressTable  .navList .sp1{
    width: auto;
  }
  .progressTable  .navList .sp1 span{
    position: relative;
    display: inline-block;
    width:120px;
    text-align: center;
    height: 100%;
    text-overflow: ellipsis;
  }
  .progressTable  .navList .sp1>span:after{
    position: absolute;
    right: -10px;
    top:50%;
    width:8px;
    height: 5px;
    margin-top: -3px;
    content:'';
    background-image: url("../../static/images/icon-down.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 8px 5px;

  }

  .progressTable >>>  .el-table__body td.e-table-align-left .cell{
    padding-left: 6px;
    padding-right: 0;
    text-align: left;
  }
  .progressTable >>> .el-table__body td.e-table-align-left .cell .lc-text {
    overflow: hidden;
    width: 100%;
    position: relative;
  }
  .progressTable >>>  .el-table__body td.e-table-align-left .cell .lc-text img{
    cursor: pointer;
    position: absolute;
    top:1px;
  }
  .progressTable >>> .el-table .el-table__body td.e-table-align-left .cell .lc-text span{
    margin-left: 20px;
    text-align: left;
  }
  .progressTable >>> .el-table .el-table__body .first-table-clouum{
    position: relative;
  }
  .progressTable >>> .el-table .el-table__body .first-table-clouum span.iconfont:before{
    position: absolute;
    right: 0;
    top:0;
    font-size: 44px;
    color: red;
  }
@media screen and (max-width: 1400px) {
  .progressTable{
    padding: 6px;
  }
}
</style>
